<template lant="html">
  <div class="">
    <p>使用v-bind绑定class和普通class共存</p>
    <span class="old" :class="bgrend">v-bind</span>
    <hr>
    <p>对象的方式绑定</p>
    <span class="old" :class="{bgred:true,color:true}">v-bind</span>
    <hr>
    <p>数组的方式绑定</p>
    <span :class="['bgred','color']">v-bind</span>
    <span :class="classArr">arr test</span>
    <hr>
    <p>混合使用</p>
    <span></span>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        bgrend: 'backgroundColorRed',
        classArr: ['bggreen', 'white']
      }
    },
    components: {}
  }
</script>
<style lang="css">
  .old {
    color: yellow;
  }

  .backgroundColorRed {
    background: red;
  }

  .bgred {
    background: red;
  }

  .color {
    color: white;
  }

  .bggreen {
    background: greenyellow;
  }

  .white {
    color: white;
  }
</style>
